import React,{useState,useEffect, useMemo} from "react";
import { Input,Select,Modal,Space,Radio,message    } from 'antd';
import type { RadioChangeEvent } from 'antd';
import request from "../../../utils/axios";
import './SubaccountEdit.less'

interface SubaccountEditType{
    isModalOpenEdit:boolean,
    handleCancelEdit: (data: boolean) => void;
    editItem:any
}

interface DataType {
    key:React.Key,
    _id:string;
    username: string;
    password: string;
    mobile: string;
    newTime: string;
    loginTime: string;
    standing:any;
    status:boolean,
    level:number
}

const SubaccountEdit:React.FC<SubaccountEditType>=({isModalOpenEdit,handleCancelEdit,editItem})=>{
    const [username,setUserName]=useState(editItem.username)
    const [mobile,setMobile]=useState(editItem.mobile)
    const [password,setPassword]=useState(editItem.password)
    const [standing, setStanding] = useState(editItem.standing[0]._id)
    const [userList,setUserList]=useState([])
    
    const getuser=async()=>{
        request.get('getuser').then(error=>{
            console.log(error);
        }).catch(response=>{
            setUserList(response.data.userList)
        })
    }

    //选择身份
    const [standingList, setStandingList] = useState([]);
    const getstanding=async()=>{
        request.get('getstanding').then(error=>{
            console.log(error);
        }).catch(response=>{
            setStandingList(response.data.standingList)
        })
    }
    const newStandingList=useMemo(()=>{
        let list:any=[]
        standingList.forEach((item:any)=>{
            if(item.name!='超级管理员'){
                list.push(item)
            }
        })
        return list
    },[standingList])

    //手机号地区
    const options = [
        {
            value: '+86中国大陆',
            label: '+86中国大陆',
        },
        {
            value: '+852中国香港',
            label: '+852中国香港',
        },
        {
            value: '+853中国澳门',
            label: '+853中国澳门',
        },
        {
            value: '+886中国台湾',
            label: '+886中国台湾',
        },
    ];

    const newUserList = useMemo(() => {
        let list:any=[]
        userList.forEach((item:DataType)=>{
            if(item.level==2){
                list.push(item)
            }
        })
        return list
    }, [userList]);

    //编辑子账号
    const handleOkEdit=async()=>{
        try {
            await request.put(`edituser/${editItem._id}`,{username:username,
                mobile:mobile,
                password:password,
                standing:standing,
            });
            handleCancelEdit(false)
        } catch (error) {
            console.error(error);
        }
    }

    const handleCancel=()=>{
        handleCancelEdit(false)
    }

    useEffect(()=>{
        getstanding()
        getuser()
    },[])

    return (
        <div>
            <Modal width={600} title="编辑子账号" open={isModalOpenEdit} onOk={handleOkEdit} onCancel={handleCancel} okText='确定' cancelText='取消'>
                <div className="subaccount-edit-box">
                    <div className="subaccount-edit-input">
                        <label>账号名称：</label>
                        <p>
                            <Space.Compact>
                                <Input style={{ width: '20%' }} defaultValue="admin：" />
                                <Input style={{ width: '70%' }} value={username} onChange={(e)=>{setUserName(e.target.value)}} placeholder="仅支持1-10位字母和数字"/>
                            </Space.Compact>
                        </p>
                        <p style={{color:'gray',marginLeft:'-20px'}}>{editItem.username.length}/10</p>
                    </div>
                    <div className="subaccount-edit-input">
                        <label>手机号码：</label>
                        <p>
                            <Select defaultValue="+86中国大陆" options={options} style={{ width: '30%' }}/>
                            <Input placeholder="请输入手机号" value={mobile} onChange={(e)=>{setMobile(e.target.value)}} style={{width:'214px',marginLeft:'15px'}}></Input>
                        </p>
                    </div>
                    <div className="subaccount-edit-input">
                        <label>登录密码：</label>
                        <Input placeholder="支持6-20位字母数字组合" value={password} onChange={(e)=>{setPassword(e.target.value)}} style={{width:'71%'}}></Input>
                        <p style={{color:'gray',marginLeft:'10px'}}>{editItem.password.length}/20</p>
                    </div>
                    <div className="subaccount-edit-input" style={{marginBottom:'25px'}}>
                        <label>身份：</label>
                        {
                            newStandingList.map((item:any)=>{
                                return  <Radio.Group onChange={(e: RadioChangeEvent)=>setStanding(e.target.value)} value={standing} style={{marginLeft:'19px'}}>
                                            <Radio value={item._id}>{item.name}</Radio>
                                        </Radio.Group>
                            })
                        }
                    </div>
                </div>
            </Modal>
        </div>
    )
}

export default SubaccountEdit